import React, { PropTypes } from 'react';
import { Breadcrumb,Tree,Table,Button, Form, Checkbox, Input,Select, DatePicker, Col} from 'antd';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;

import { connect } from 'react-redux'
import { showMask } from '../../action/mask';

import SourceAdd from '../window/room/SourceAdd.jsx';

import '../less/member.less';

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  render(text) {
    return <a href="#">{text}</a>;
  },
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const pagination = {
  total: data.length,
  showSizeChanger: true,
  onShowSizeChange(current, pageSize) {
    console.log('Current: ', current, '; PageSize: ', pageSize);
  },
  onChange(current) {
    console.log('Current: ', current);
  },
};

class SourceList extends React.Component {
  static contextTypes = {
    className: React.PropTypes.string,
  };

  static defaultProps = {
    className: 'queue-demo',
  };

  constructor() {
    super();
    this.state = {

    };
  }
  componentDidMount() {

  }
  _showUser(record,index){
      this.props.showMask(<SourceAdd />);
  }
  render() {
    return (
        <div className="containerConten">
          <div className="memHead">
            <Breadcrumb>
              <Breadcrumb.Item>房源管理</Breadcrumb.Item>
              <Breadcrumb.Item>所属房源</Breadcrumb.Item>
              <Breadcrumb.Item>房源列表</Breadcrumb.Item>
            </Breadcrumb>
            <div className="rightOption">
                <ul>
                    <li onClick={this._showUser.bind(this)} style={{color:'#2C97DE'}}>新增房源</li>
                </ul>
            </div>
          </div>
          <div className="memContent">
            <div className="memTable">
                <div className="memTableContent">
                    <div className="memSearch">
                      <Form inline>
                      <FormItem label="城市">
                        <Input placeholder="请输入搜索关键字" />
                      </FormItem>
                        <FormItem label="区域">
                          <Select size="large" style={{width:100}} defaultValue="lucy" >
                            <Option value="jack">VIP</Option>
                            <Option value="lucy">lucy</Option>
                            <Option value="disabled" disabled>disabled</Option>
                            <Option value="yiminghe">yiminghe</Option>
                          </Select>
                        </FormItem>
                        <FormItem label="楼盘">
                          <Select size="large" style={{width:100}} defaultValue="lucy" >
                            <Option value="jack">VIP</Option>
                            <Option value="lucy">lucy</Option>
                            <Option value="disabled" disabled>disabled</Option>
                            <Option value="yiminghe">yiminghe</Option>
                          </Select>
                        </FormItem>
                        <FormItem label="户型">
                          <Select size="large" style={{width:100}} defaultValue="lucy" >
                            <Option value="jack">VIP</Option>
                            <Option value="lucy">lucy</Option>
                            <Option value="disabled" disabled>disabled</Option>
                            <Option value="yiminghe">yiminghe</Option>
                          </Select>
                        </FormItem>
                        <FormItem label="栋">
                          <Select size="large" style={{width:100}} defaultValue="lucy" >
                            <Option value="jack">VIP</Option>
                            <Option value="lucy">lucy</Option>
                            <Option value="disabled" disabled>disabled</Option>
                            <Option value="yiminghe">yiminghe</Option>
                          </Select>
                        </FormItem>
                        <FormItem label="单元">
                          <Select size="large" style={{width:100}} defaultValue="lucy" >
                            <Option value="jack">VIP</Option>
                            <Option value="lucy">lucy</Option>
                            <Option value="disabled" disabled>disabled</Option>
                            <Option value="yiminghe">yiminghe</Option>
                          </Select>
                        </FormItem>
                        <FormItem label="楼层">
                          <Select size="large" style={{width:100}} defaultValue="lucy" >
                            <Option value="jack">VIP</Option>
                            <Option value="lucy">lucy</Option>
                            <Option value="disabled" disabled>disabled</Option>
                            <Option value="yiminghe">yiminghe</Option>
                          </Select>
                        </FormItem>
                      </Form>
                    </div>
                    <Table columns={columns} dataSource={data} pagination={pagination}/>
                </div>
            </div>
          </div>
        </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    maskStatus: state.mask.maskStatus
  }
}

export default connect(
  mapStateToProps,
  { showMask }
)(SourceList)
